import React, { useState, useEffect } from 'react'
import { history, connect } from 'umi';
import FlxButton from '@/components/FlxButton'
import { Row, Col, Checkbox, Card, Space, Radio, InputNumber, message, Button } from 'antd'
const SubjectAccountDetail = (props) => {
    const { dispatch } = props
    const [data, setData] = useState({})
    const {
        status,
        label,
        value,
        maxStudent,
        followPrice,
        followIntegralPrice,
        followPriceQaAmount,
        followAskAmount,
        priceType,
        price,
        integralPrice,
        priceQaAmount,
        followStatus,
        askAmount
    } = data
    const onChange = (type, val = {}) => {
        setData({
            ...data,
            ...val
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchGetSubjectQaConfig',
            payload: {
            },
            callback: (e = {}) => {
                const { subjectQaConfig = {} } = e
                setData(subjectQaConfig)
            }
        })
    }
    const validateForm = () => {
        let isValid = true;
        return isValid;
    };
    const handleSubmit = () => {
        if (!validateForm()) return;
        // 通过校验后的提交逻辑...
        else {
            const payload = {}
            Object.keys(data).map(val => {
                if (!data[val]) {
                    payload[val] = 0
                } else {
                    payload[val] = data[val]
                }
            })
            dispatch({
                type: 'answering/fakeSaveSubjectQaConfig',
                payload: payload,
                callback: (e) => {
                    fetchData()
                }
            })
        }

    };

    return <Card title='学科答疑'>
        <Row style={{ width: '100%', border: 'rgba(236, 236, 236, 1) 1px solid', padding: 24 }} gutter={[24, 24]}>
            <Col span={24}>
                <Space align='start '>
                    <div style={{ flexShrink: '0' }}>  是否付费：</div>
                    <div>
                        <Row gutter={[12, 12]}>
                            <Col span={24}>
                                <Radio.Group onChange={(e) => {
                                    onChange(value, {
                                        priceType: e.target.value
                                    })
                                }} value={priceType}>
                                    <Radio value={'free'}>免费</Radio>
                                    <Radio value={'price'}>付费</Radio>
                                </Radio.Group>
                            </Col>
                            {priceType === 'price' ? <>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber onChange={(e) => {
                                        onChange(value, {
                                            price: e
                                        })
                                    }} style={{ margin: '0 12px' }} value={price === 0 ? '' : price}></InputNumber>元</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                integralPrice: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={integralPrice === 0 ? '' : integralPrice}></InputNumber>答疑积分</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                priceQaAmount: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={priceQaAmount === 0 ? '' : priceQaAmount}></InputNumber>答疑次数</div>
                                </Col>
                                <Col span={24}>
                                    <div style={{ color: '#333333', fontSize: '14px' }}> 追问<InputNumber
                                        onChange={(e) => {
                                            onChange(value, {
                                                askAmount: e
                                            })
                                        }}
                                        style={{ margin: '0 12px' }} value={askAmount === 0 ? '' : askAmount}></InputNumber>次</div>
                                </Col>
                            </> : <Col span={24}>
                                <div style={{ color: '#333333', fontSize: '14px' }}> 追问<InputNumber
                                    onChange={(e) => {
                                        onChange(value, {
                                            askAmount: e
                                        })
                                    }}
                                    style={{ margin: '0 12px' }} value={askAmount === 0 ? '' : askAmount}></InputNumber>次</div>
                            </Col>}
                        </Row>
                    </div>
                </Space>
            </Col>
            <Col span={24}>
                <Space align='start '>
                    <div style={{ flexShrink: '0' }}>  达到追问数量后是否允许继续追问：</div>
                    <div>

                        <Row gutter={[12, 12]}>
                            <Col span={24}>
                                <Radio.Group onChange={(e) => {
                                    onChange(value, {
                                        followStatus: e.target.value
                                    })
                                }} value={followStatus}>
                                    <Radio value={'0'}>不允许</Radio>
                                    <Radio value={'1'}>允许</Radio>
                                </Radio.Group>
                            </Col>


                        </Row>
                    </div>
                </Space>

            </Col>
            {followStatus === '1' ? <>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber onChange={(e) => {
                        onChange(value, {
                            followPrice: e
                        })
                    }} style={{ margin: '0 12px' }} value={followPrice === 0 ? '' : followPrice}></InputNumber>追问价格（元）</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 支付<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followIntegralPrice: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followIntegralPrice === 0 ? '' : followIntegralPrice}></InputNumber>追问积分</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followPriceQaAmount: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followPriceQaAmount === 0 ? '' : followPriceQaAmount}></InputNumber>追问答疑次数</div>
                </Col>
                <Col span={24}>
                    <div style={{ color: '#333333', fontSize: '14px' }}> 消耗<InputNumber
                        onChange={(e) => {
                            onChange(value, {
                                followAskAmount: e
                            })
                        }}
                        style={{ margin: '0 12px' }} value={followAskAmount === 0 ? '' : followAskAmount}></InputNumber>追问次数</div>
                </Col>
            </> : null}
        </Row>
        <FlxButton onOk={() => {
            handleSubmit()
        }}></FlxButton>
    </Card>
}
export default connect(({ loading }) => ({
    loading
}))(SubjectAccountDetail)

